<template>
  <div id="app">
    <div class="container">
          <router-view></router-view>
    </div>
    <div class="footer">
    <cube-tab-bar
      v-model="selectedLabelDefault"
      :data="tabs"
      @click="clickHandler"
    >
    </cube-tab-bar>
  </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      //
      selectedLabelDefault: "/",
      tabs: [
        {
          label: "首页",
          icon: "iconfont icon-home",
          //value设置路由跳转的地址
          value: "/",
        },
        {
          label: "我的课程",
          icon: "iconfont icon-zixun",
          value: "/course",
        },
        {
          label: "个人中心",
          icon: "iconfont icon-geren",
          value: "/profile",
        },
      ],
    };
  },
    watch:{
    // 问题1：当刷新时 selectedLabelDefault会改到首页 但是路径还是当前路径 不匹配
    // $route(to,from){
    //   // 只有属性发生改变才能监听
    //   // this.selectedLabelDefault = to.path;
    // }

    $route:{
      handler(to,from){
      this.selectedLabelDefault = to.path;   
      },
      immediate:true //默认会先执行一遍
    }
  },
  methods: {
    clickHandler(label) {
      // if you clicked home tab, then print 'Home'
      // console.log(label);
      // console.log(this.$route.path)
      //vue-router.esm.js?8c4f:2008 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/profile".
      //解决路由重复跳转
      if(label===this.$route.path) return false; 
      this.$router.push(label).catch(()=>{});
    },
  },

};
</script>

<style lang="less">
//类名可以直接在浏览器里点击获取
html,body,#app{
  height: 100%;
  font-size: 16px;
}
// .cube-tab-bar {
//   //设置fixed 苹果手机向上滑会闪
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   right: 0;
// }
.cube-tab {
  font-size: 16px;
  margin-bottom:-7px;
    i {
      font-size: 22px;
      margin-bottom: 4px;
      display: inline-block;
    }
  }

  #app{
    display: flex;
    flex-direction: column;//设置主轴为纵向
    .container{
      flex: 1;
      //footer已经有高 剩余的都是container
      overflow: scroll;
      background-color: #eee;
    }
    .footer{
      background: #f2f2f2;
    }
  }
  
</style>
